<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-col :span="8">
        <el-card shadow="hover">
          管理员用户
          {{ formData.admin_num }}
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          平台注册用户
          {{ formData.total }}
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          平台文章总数
          {{ formData.article_num }}
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          广告位{{ formData.advpos_num }}个
          广告图{{ formData.tag_num }}张
        </el-card>
      </el-col>
    </div>
  </div>
</template>

<script>
import { getsysBaseInfoApi } from '@/api/index'
export default {
  name: 'Dashboard',
  data() {
    return {
      formData: {
        admin_num: '',
        total: '',
        article_num: '',
        advpos_num: '',
        tag_num: ''
      }
    }
  },
  methods: {
    async initData(data) {
      const res = await getsysBaseInfoApi(data)
      this.formData = res
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin-left: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
::v-deep .el-col {
  width: 303.55px;
  height: 90px;
}
.el-card:nth-child(1){
  background-color: #fb6d49;
}
.el-card:nth-child(2){
  background-color: #67c23a;
}
</style>
